<template>
	<view>
		<uni-popup ref="popupcheck" type="bottom">
			<view style="background: #fff;">
				<view
					style="display: flex;background: #fff;padding: 20px 10px;width: calc(100% - 10px);box-sizing: border-box;margin-left: 5px;justify-content: space-between;">
					<view style="color: #000;font-size: 18px;float: left;" @click="close">取消</view>
					<view style="color: green;font-size: 18px;float: right;" @click="submit">确认</view>
				</view>
				<view class="customizeBox">
					<uni-easyinput v-model="customize" placeholder="请输入自定义信息" @confirm="addCustomize" />
					<button size="mini" @click="addCustomize">
						<text style="font-size: 16px;font-weight: bold;">添加</text>
					</button>
				</view>
				<uni-data-checkbox selectedColor="#d1100a" emptyText="暂无数据" mode="tag" multiple v-model="checkbox"
					:localdata="hobby">
				</uni-data-checkbox>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	//不想双向绑定了
	export default {
		data() {
			return {
				checkbox: [],
				hobby: [],
				customize: ''
			}
		},
		methods: {
			addCustomize() {
				if (!this.customize) return uni.showToast({
					icon: 'none',
					title: '请输入自定义内容'
				})
				let idx = this.hobby.findIndex(item => item.value == this.customize)
				if (idx !== -1) return uni.showToast({
					icon: 'none',
					title: '当前输入内容已存在'
				})
				this.hobby.unshift({
					text: this.customize,
					value: this.customize
				})
				this.customize = ''
				this.$emit('add', this.hobby)
			},
			open(data, checked) {
				console.log(data, checked);
				this.hobby = data
				if (checked) this.checkbox = checked.split(',')
				else this.checkbox = []
				this.$refs.popupcheck.open()
			},
			close() {
				this.searchValue = ''
				this.$refs.popupcheck.close()
			},
			submit() {
				this.$emit('confirm', this.checkbox)
				this.$refs.popupcheck.close()
			},
		}
	}
</script>

<style scoped lang="scss">
	.customizeBox {
		display: flex;
		padding: 0 15px;
	}

	/deep/.checklist-group {
		display: block !important;
		width: 100%;
		height: 40vh;
		padding: 0px 10px 10px 10px;

		box-sizing: border-box;
		text-align: center;
		overflow-y: scroll;
	}

	/deep/.checklist-box {
		display: block !important;
		margin: 5px !important;
	}

	/deep/.checklist-content {

		display: block !important;
	}
</style>